<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <div class="main">
        <div class="lunbo">
            <div class="search-area">
                <img src="./icon/search.svg" alt="">
                <!-- <input type="text" placeholder="搜索..."> -->
                <span>搜索...</span>
            </div>
            <img class="lunbo-img" src="./image/lunbo.png" alt="">
        </div>
        <div class="fenlei">
            <div>
                <img src="./image/suit.png" alt="">
                <p>气质女装</p>
            </div>
            <div>
                <img src="./image/case.png" alt="">
                <p>箱包手袋</p>
            </div>
            <div>
                <img src="./image/man.png" alt="">
                <p>潮流男装</p>
            </div>
            <div>
                <img src="./image/fashion.png" alt="">
                <p>时尚饰品</p>
            </div>
        </div>
        <div class="tehui">
            <img class="title" src="./image/title.png" alt="">
            <div class="content">
                <img src="./image/huodong.png" alt="">
                <div class="tehui-items">
                    <div class="item">
                        <img src="./image/tehui1.png" alt="">
                        <span>￥ 117</span>
                    </div>
                    <div class="item">
                        <img src="./image/tehui2.png" alt="">
                        <span>￥ 118</span>
                    </div>
                    <div class="item">
                        <img src="./image/tehui3.png" alt="">
                        <span>￥ 119</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="baoyi">
            <div class="baokuan">
                <span class="title">爆款推荐</span>
                <span class="sub-title">最受欢迎</span>
                <div class="info">
                    <div class="item">
                        <img src="./image/tehui1.png" alt="">
                        <p>￥
                            <span>423</span>
                        </p>
                        <div class="youhui">
                            <span>立减 </span>
                            <span class="price"> 90</span>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./image/tehui2.png" alt="">
                        <p>￥
                            <span>111</span>
                        </p>
                        <div class="youhui">
                            <span>立减 </span>
                            <span class="price"> 90</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="baokuan">
                <span class="title">爆款推荐</span>
                <span class="sub-title">最受欢迎</span>
                <div class="info">
                    <div class="item">
                        <img src="./image/tehui1.png" alt="">
                        <p>￥
                            <span>423</span>
                        </p>
                        <div class="youhui">
                            <span>立减 </span>
                            <span class="price"> 90</span>
                        </div>
                    </div>
                    <div class="item">
                        <img src="./image/tehui2.png" alt="">
                        <p>￥
                            <span>111</span>
                        </p>
                        <div class="youhui">
                            <span>立减 </span>
                            <span class="price"> 90</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="xinxian">
            <img class="title" src="./image/xinxian.png" alt="">
            <div class="info">
                <div class="item">
                    <img src="./image/tehui2.png" alt="">
                    <span>￥ 298</span>
                </div>
                <div class="item">
                    <img src="./image/tehui2.png" alt="">
                    <span>￥ 298</span>
                </div>
                <div class="item">
                    <img src="./image/tehui2.png" alt="">
                    <span>￥ 298</span>
                </div>
                <div class="item">
                    <img src="./image/tehui2.png" alt="">
                    <span>￥ 298</span>
                </div>
            </div>
        </div>
        <div class="tuijian">
            <div class="grid-item">
                <img src="./image/tehui1.png" alt="">
                <div class="name">MONO-MART 男女同款复古撞色条纹Polo衫 海军蓝 L</div>
                <div class="price">
                    <span class="p1">¥ 196</span>
                    <span class="p2">¥ 196</span>
                    <span class="p3">2.9 万+人付款</span>
                </div>
            </div>
            <div class="grid-item">
                <img src="./image/tehui1.png" alt="">
                <div class="name">MONO-MART 男女同款复古撞色条纹Polo衫 海军蓝 L</div>
                <div class="price">
                    <span class="p1">¥ 196</span>
                    <span class="p2">¥ 196</span>
                    <span class="p3">2.9 万+人付款</span>
                </div>
            </div>
            <div class="grid-item">
                <img src="./image/tehui1.png" alt="">
                <div class="name">MONO-MART 男女同款复古撞色条纹Polo衫 海军蓝 L</div>
                <div class="price">
                    <span class="p1">¥ 196</span>
                    <span class="p2">¥ 196</span>
                    <span class="p3">2.9 万+人付款</span>
                </div>
            </div>
            <div class="grid-item">
                <img src="./image/tehui1.png" alt="">
                <div class="name">MONO-MART 男女同款复古撞色条纹Polo衫 海军蓝 L</div>
                <div class="price">
                    <span class="p1">¥ 196</span>
                    <span class="p2">¥ 196</span>
                    <span class="p3">2.9 万+人付款</span>
                </div>
            </div>
            <div class="grid-item">
                <img src="./image/tehui1.png" alt="">
                <div class="name">MONO-MART 男女同款复古撞色条纹Polo衫 海军蓝 L</div>
                <div class="price">
                    <span class="p1">¥ 196</span>
                    <span class="p2">¥ 196</span>
                    <span class="p3">2.9 万+人付款</span>
                </div>
            </div>
            <div class="grid-item">
                <img src="./image/tehui1.png" alt="">
                <div class="name">MONO-MART 男女同款复古撞色条纹Polo衫 海军蓝 L</div>
                <div class="price">
                    <span class="p1">¥ 196</span>
                    <span class="p2">¥ 196</span>
                    <span class="p3">2.9 万+人付款</span>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="tabs active">
            <img src="./icon/home.svg" alt="">
            <span>首页</span>
        </div>
        <div class="tabs">
            <img src="./icon/category.svg" alt="">
            <span>首页</span>
        </div>
        <div class="tabs">
            <img src="./icon/cart.svg" alt="">
            <span>首页</span>
        </div>
        <div class="tabs">
            <img src="./icon/mine.svg" alt="">
            <span>首页</span>
        </div>
    </div>
</body>

</html>